<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="bootstrap.min.css"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<style>
#form1{
background-color: rgba(245,245,245,0.219);
}
#mainbg{
background-image: url(bg4.jpg);
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><b>Precious Memories </b></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="destination.html">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="Destination(rafi).html" role="button" data-toggle="dropdown" aria-expanded="false">
Destination
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="delhi.html">Delhi</a>
<a class="dropdown-item" href="jamshedpur.html">Jamshedpur</a>
<a class="dropdown-item" href="jaipur.html">Jaipur</a>
<a class="dropdown-item" href="">Goa</a>
<a class="dropdown-item" href="manali.html">Manali</a>
<a class="dropdown-item" href="pune.html">Pune</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="destination.html">others</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link " href="Aboutus.html"> Feedback</a>
</li>
<li class="nav-item">
<a class="nav-link " href="contact.html"> Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> Log in</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--main body-->
<div class="container-fluid " id="mainbg">
<!--headings-->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" >
<h2 class="mt-1 text-capitalize text-center">Having a doubt</h2>
<p class="p-2 text-center text-decoration-underline"> Contact Us Now</p>
<h3 class=" text-center">Fill the below form to contact us and to solve any doubt</h3>
</div>
</div></div>
<!--form-->
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6 mt-3 mb-3" id="form1">
<form>
<h1 class="text mt-3 text-center">📍Booking a Venue📍</h1>
<div class="form-group mt-3">
<label for="Firstname"><h4 class="text">First Name </h4></label>
<input type="text" class="form-control" id="Firstname" placeholder="xxxyyyzz" onkeypress="validationfname()" required>
<span id="fn-error" class="text ml-5 mt-5 text-light text-capitalize"></span>
</div>
<div class="form-group">
<label for="Lastname"><h4 class="text">Last Name </h4></label>
<input type="text" class="form-control" id="Lastname" placeholder="xxxxyyyyzzz"onkeypress="validationlname()" required>
<span id="ln-error" class="text ml-5 mt-5 text-lighttext-capitalize"></span>
</div>
<div class="form-group">
<label for="exampleFormControlInput1 text-light"><h4 class="text ">Email address </h4></label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" onkeypress="validationemail()" required >
<span id="e-error" class="text text-light ml-5 mt-5 text-capitalize"></span>
</div>
<div class="form-group">
<label for="City text-light"><h4 class="text ">Select a City</h4></label>
<select class="form-select" style="width: 100%; height: 40px;" id="city" required onchange="giveoption()">
<option >---select a City----</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Jamshedpur">Jamshedpur</option>
<option value="Kolkata">Kolkata</option>
<option value="Banglore">Bangalore</option>
<option value="Chennai">Chennai</option>
<option value="Ahemdabad">Ahemdabad</option>
<option value="Pune">Pune</option>
<option value="Surat">Surat</option>
<option value="Jaipur">Jaipur</option>
<option value="Bhopal">Bhopal</option>
<option value="Indore">Indore</option>
<option value="Thane">Thane</option>
<option value="Srinagar">Srinagar</option>
<option value="Amritsar">Amritsar</option>
</select>
</div>
<div class="form-group">
<label for="dest text-light"><h4 class="text ">Select a Destination📌 </h4></label>
<select class="form-select" style="width: 100%; height: 40px;" required id="dest">
<option >---select a Destination---</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1 text-light"> <h4 class="text ">Message </h4></label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required></textarea>
</div>
<center> <button type="submit" class="btn btn-primary mb-3" >Submit</button> </center>
</form>
</div>
<div class="col-lg-3"></div>
</div>
</div>
<!--footer-->
<!-- Footer -->
<footer class="text-center text-lg-start bg-body-tertiary text-light bg-dark">
<!-- Section: Social media --> <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<!-- Right -->
<div>
<a href="" class="me-4 text-reset">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
<a href="#!" class="text-reset">Angular</a>
</p>
<p>
<a href="#!" class="text-reset">React</a>
</p>
<p>
<a href="#!" class="text-reset">Vue</a>
</p>
<p>
<a href="#!" class="text-reset">Laravel</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
<a href="#!" class="text-reset">Pricing</a>
</p>
<p>
<a href="#!" class="text-reset">Settings</a>
</p>
<p>
<a href="#!" class="text-reset">Orders</a>
</p>
<p>
<a href="#!" class="text-reset">Help</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3"></i>
info@example.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!--form validation email field-->
<script>
var ef= document.getElementById("exampleFormControlInput1");
var em= document.getElementById("e-error");
var fnf= document.getElementById("Firstname");
var efn= document.getElementById("fn-error");
var lnf= document.getElementById("Lastname");
var eln= document.getElementById("ln-error");
function validationfname()
{
var reg1= /^[a-zA-Z]*$/; // fname
if(reg1.test(fnf.value)== false)
{
efn.innerHTML="enter a valid name";
return false;
}
efn.innerHTML="";
return true;
}
function validationlname()
{
var reg1= /^[a-zA-Z]*$/; // lname
if(reg1.test(lnf.value)== false)
{
eln.innerHTML="enter a valid name";
return false;
}
efn.innerHTML="";
return true;
}
function validationemail()
{
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; // email
if (reg.test(ef.value) == false)
{
em.innerHTML= "please enter a valid email address!";
return false;
}
em.innerHTML="";
return true;
}
</script>
<script>
function giveoption()
{
var city= document.getElementById("city");
var dest= document.getElementById("dest");
dest.innerHTML="";
var ourcity= city.value;
var destinations={
"Delhi":["Jai Mahal Palace","Jaibagh Palace","Yasundra 5 star Hall"],
"Mumbai":["Rajpalstar Palace","Huge Palace","Zung Palace"],
"Kolkata":["Dinner Palace","Ashique Palace","Fis Palace"],
"Jaipur":[" Water Palace","Big Palace","Jalbhag Palace"],
"Jamshedpur":["Mohabbaat Palace","Mahal Palace","Hing Palace"],
"Banglore":[" 5 star Hall","Jai Palace","Naaz Palace"],
"Chennai":["House Palace","Yoth Palace","Singh Palace"],
"Ahemdabad":["Jingr Palace","Maharaja Palace","Son Palace"],
"Surat":["Sun Hall","Ring Palac","Higg Palace"],
"Bhopal":["AAA Hal","Yolk Palace","Alam Palace"],
"Pune":["star Hall","Bagh Palace","BB Palace"],
"Indore":["Tiger Hall","King Palace","Hum Palace"],
"Thane":["star Hall","ihhh Palace","Rose Palace"],
"Srinagar":["Yasundra Hall"," yalkMahal Palace","Rath Palace"],
"Amritsar":["Yasundra 5 star Hall","Jai Mahal Palace","Jaibagh Palace"]
};
var destinationsopts= destinations[ourcity];
for(var i=0; i<destinationsopts.length;i++)
{
var option= document.createElement("option");
option.text=destinationsopts[i];
dest.add(option);
}
}
</script>
</body>
</html>